<template>
	<div class="container">
		<p>照片墙</p>
		<Waterfall :list="imageData">
			<template #item="{ item, url, index }">
				<div class="card">
				<LazyImg :url="url" />
				<p class="text">这是内容</p>
				</div>
			</template>
		</Waterfall>
	</div>
</template>


<script lang="ts">
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/style.css'

interface ImageDataRow {
	item: string,
	url: string,
	index: string,
}

interface WallDataState {
	imageData: Array<ImageDataRow>;
}

export default defineComponent({
	name: 'photoWall',
	components: { Waterfall,  LazyImg},
	setup() {
		const state = reactive<WallDataState>({
			imageData: [],
		});

		// 初始化表格数据
		const initTableData = async () =>  {
			const images01:ImageDataRow = {item:'',url:'',index:''}
			const images02:ImageDataRow = {item:'',url:'',index:''}
			const images03:ImageDataRow = {item:'',url:'',index:''}
			state.imageData.push(images01,images02,images03);
		};

		// 页面加载时
		onMounted(() => {
			initTableData();
		});

		return {
			...toRefs(state),
		}
	}
})
</script>